@layer base {
  table {
    @apply w-full;
  }

  thead {
    @apply hidden lg:table-header-group;
  }

  tr {
    @apply relative block max-w-full border-b-4 border-gray-100 lg:table-row lg:border-b-0 dark:border-slate-800;
  }

  tr:last-child {
    @apply border-b-0;
  }

  td:not(:first-child) {
    @apply lg:border-t-0 lg:border-r-0 lg:border-b-0 lg:border-l lg:border-gray-100 lg:dark:border-slate-700;
  }

  th {
    @apply lg:p-3 lg:text-left;
  }

  td {
    @apply flex justify-between border-b border-gray-100 px-4 py-3 text-right align-top lg:table-cell lg:border-b-0 lg:p-3 lg:text-left lg:align-middle dark:border-slate-800;
  }

  td:last-child {
    @apply border-b-0;
  }

  tbody tr,
  tbody tr:nth-child(odd) {
    @apply lg:hover:bg-gray-100 lg:dark:hover:bg-slate-700/70;
  }

  tbody tr:nth-child(odd) {
    @apply lg:bg-gray-100/50 lg:dark:bg-slate-800/50;
  }

  td:before {
    content: attr(data-label);
    @apply pr-3 text-left font-semibold lg:hidden;
  }
}
